<template>
  <div class="login-wrap">
    <div class="login-card">
      <h1>欢迎回来</h1>
      <p class="sub-title">登录后继续</p>

      <van-form @submit="onSubmit" class="form">
        <van-cell-group inset>
          <van-field
            v-model="form.userName"
            name="userName"
            label="账号"
            placeholder="请输入用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="form.passWord"
            type="password"
            name="passWord"
            label="密码"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
        </van-cell-group>

        <div class="btn-box">
          <van-button
            native-type="submit"
            round
            block
            type="primary"
            class="login-btn"
          >
            立即登录
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup>
import { reactive,getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'


const router = useRouter()
const { proxy } = getCurrentInstance()

const form = reactive({
  userName: '',
  passWord: ''
})

const onSubmit = async() => {
  // 这里写登录逻辑
  const {data} = await proxy.$api.login(form)
   if(data.code === 10000){
    localStorage.setItem('h5_token', data.data.token)
    localStorage.setItem('h5_userInfo', JSON.stringify(data.data.userInfo))
    router.push('/home')
   }
   
   
}
</script>

<style lang="less" scoped>
/* 变量 */
@primary: #34ddff;
@radius: 16px;

.login-wrap {
  min-height: 100vh;
  background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.login-card {
  width: 100%;
  max-width: 400px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  border-radius: @radius;
  box-shadow: 0 8px 32px rgba(255, 96, 52, 0.15);
  padding: 40px 24px 32px;
  text-align: center;
}

h1 {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 600;
  color: #333;
}

.sub-title {
  margin: 0 0 32px;
  font-size: 14px;
  color: #999;
}

.form {
  .van-cell-group {
    border-radius: @radius;
    overflow: hidden;
  }
  .van-field {
    padding: 14px 16px;
    font-size: 15px;
  }
}

.btn-box {
  margin-top: 32px;
}

.login-btn {
  height: 46px;
  font-size: 16px;
  font-weight: 500;
  background: linear-gradient(90deg, @primary 0%, #ff8248 100%);
  border: none;
  transition: transform 0.2s;

  &:active {
    transform: scale(0.98);
  }
}
</style>